<template>
  <div class="root">
      <div class="left">

          <span>
              教育机构中心
          </span>
          <div></div>
        <span class="t2">
             欢迎您
          </span>

      </div>

    <div class="center">
      <el-form ref="form" :model="subform" label-width="80px">
        <el-input class="elInput" prefix-icon="el-icon-user-solid" placeholder="在此输入您的用户名" v-model="subform.username" clearable></el-input>
        <el-input class="elInput" prefix-icon="el-icon-share" placeholder="在此输入您的密码" v-model="subform.password" show-password></el-input>
        <span class="forgotPwd">忘记密码?</span>
        <el-button class="elButton" @click="submit">登录</el-button>
        <el-button class="elButton1" @click="dialog = true">注册</el-button>
      </el-form>

    </div>


    <div>
      <el-drawer
        :before-close="handleClose"
        :visible.sync="dialog"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer"
      >
        <div class="demo-drawer__content">
          <el-form :model="form">
            <el-input class="" prefix-icon="el-icon-user-solid" placeholder="在此输入您的用户名" v-model="form.username" clearable></el-input>
            <el-input class="elInput" prefix-icon="el-icon-share" placeholder="在此输入您的密码" v-model="form.password" show-password></el-input>
            <el-input class="elInput" prefix-icon="el-icon-s-custom" placeholder="在此输入您的姓名" v-model="form.name" clearable></el-input>
            <el-input class="elInput" prefix-icon="el-icon-s-custom" placeholder="在此输入您的年龄" v-model="form.age" clearable></el-input>
            <div>
              <el-select class="gender" v-model="form.gender" placeholder="请选择性别">
                <el-option
                  v-for="item in form.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div>
              <el-select class="gender" v-model="form.level" placeholder="请选择性别">
                <el-option
                  v-for="item in form.eLevel"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
              <div>
                <el-select class="gender" v-model="form.status" placeholder="您是教师还是学生">
                  <el-option
                    v-for="item2 in form.eStatus"
                    :key="item2.value"
                    :label="item2.label"
                    :value="item2.value">
                  </el-option>
                </el-select>
            </div>
          </el-form>
          <div class="bottom">
            <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '提 交' }}</el-button>
            <el-button @click="cancelForm">取 消</el-button>

          </div>
        </div>
      </el-drawer>
    </div>
  </div>



</template>

<script>
export default {
  data() {
    return {
      table: false,
      dialog: false,
      loading: false,
      subform: {
        username: "",
        password: "",
        name:"",
      },


      form: {

        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',

        status:'',
        username: '',
        password:'',
        gender:'',
        name:'',
        age:'',
        user1:'true',
        user2:'false',

        eLevel: [{
          value: '小学',
          label: '小学'
        },
          {
            value: '初中',
            label: '初中'
          },
          {
            value: '高中',
            label: '高中'
          },
          {
            value: '本科',
            label: '本科'
          },
          {
            value: '硕士',
            label: '硕士'
          },
          {
            value: '博士',
            label: '博士'
          }],


        options: [{
          value: '男',
          label: '男'
        }, {
          value: '女',
          label: '女'
        }],

        eStatus: [{
          value: 'teacher',
          label: '教师'
        }, {
          value: 'student',
          label: '学生'
        }],
        value: ''
      },
      formLabelWidth: '80px',
      timer: null,
    };
  },
  methods:{
    submit(){
      let _this=this
      this.$axios({
        method:'GET',
        url:'http://localhost/user/checkUser/'+_this.subform.username+'/'+_this.subform.password,

      }).then(response=>{
        let user=response.data
        if(user==='student')
        {
          this.$message({
            message: '登陆成功',
            type: 'success'
          });
          this.$router.push({
            path: "/indexStu",
            query: {
              username: this.subform.username,
            }

          });


        }
        if(user==='teacher'){
          this.$message({
            message: '登陆成功',
            type: 'success'
          });
          this.$router.push({
            path: "/indexTec",
            query: {
              username: this.subform.username,
            }

          });
        }
        if(user==='admin'){
          this.$message({
            message: '登陆成功',
            type: 'success'
          });
          this.$router.push({
            path: "/displayEchart",
            query: {
              username: this.subform.username,
            }

          });
        }
        if(user==='err'){
          this.$message.error('账号密码错误');
        }
      })
    },


    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
        .then(_ => {
          if(this.form.username===''||this.form.gender===''||this.form.password===''||this.form.name==='')
          {
            this.$message({
              showClose: true,
              message: '所填信息不能为空',
              type: 'warning'
            });
          }
          else
          {
            let _this=this
            this.$axios({
              method:'GET',
              url:'http://localhost/user/checkUser/'+_this.form.username+'/'+_this.form.password,

            }).then(response=>{
              let user=response.data
              if(user==='ok')
              {
                this.$message({
                  message: '该用户名已被注册',
                  type: 'warning'
                });
              }
              else
              {
                this.loading = true;
                this.timer = setTimeout(() => {
                  done();
                  // 动画关闭需要一定的时间
                  setTimeout(() => {
                    this.loading = false;
                  }, 400);
                }, 2000);

                let _this=this;
                this.$axios({
                  method:'POST',
                  url:'http://localhost/user/save',
                  data:{
                    username: _this.form.username,
                    gender: _this.form.gender,
                    name: _this.form.name,
                    password: _this.form.password,
                    status: _this.form.status,
                  }

                }).then(response=>{
                  this.$message({
                    message: '恭喜你，注册成功',
                    type: 'success'
                  })

                  if(_this.form.status=='student'){
                      _this.$axios({
                          method:"POST",
                          url:"http://localhost/student/save",
                          data:{
                            username: _this.form.username,
                            gender: _this.form.gender,
                            sname: _this.form.name,
                            age: _this.form.age,
                            slevel: _this.form.level,
                            del:0
                          }
                      })


                    this.$router.push({
                      path: "/indexStu",
                      query: {
                        username: this.form.username,
                      }

                    });
                  }

                  if(_this.form.status=='teacher'){
                    _this.$axios({
                      method:"POST",
                      url:"http://localhost/teacher/save",
                      data:{
                        username: _this.form.username,
                        gender: _this.form.gender,
                        name: _this.form.name,
                        age: _this.form.age,
                        level: _this.form.level,
                        del:0
                      }
                    })


                    this.$router.push({
                      path: "/indexTec",
                      query: {
                        username: this.form.username,
                      }

                    });
                  }

                })
              }
            })

          }
        })
        .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    }

  }

}

</script>

<style scoped>
.root{
  width: 100%;
  height: 100%;
  position: absolute;
  top:-4px;
  left:-4px;
  /* background-repeat: no-repeat;
  background-attachment: fixed; */
  background-image: url(https://z1.muscache.cn/pictures/carson/carson-1617256463716/original/3938e271-a1f4-4e7d-9715-9171e66a3267.jpg);
  background-position: 40%;
  background-size: 100% 100%;

}
.left{
    position: relative;
    top: 40px;
    left:100px;
    font-weight: 600 !important;
    color: white !important;
    margin-right: 16px !important;
    font-size: 32px !important;
    line-height: 34px !important;
    writing-mode: vertical-lr;/*从左向右 从右向左是 writing-mode: vertical-rl;*/

}

.t2{
    position: absolute;
    left:50px;
    display: block;
    height: 500px;

}
.center{
    padding: 40px;
    border-radius: 10px;
    background-color: white;
    position: absolute;
    right:10%;
    top:100px;
    z-index:1;
    width: 20%;
    margin: 0 auto;
    opacity: 0.9;
}

.center .elInput:nth-child(1){
    margin-bottom: 40px;

}
.center .elInput:nth-child(2){
    margin-bottom: 20px;

}
.elInput{
    border-radius: 20px;
}

.elButton{
   width: 100%;
   margin-bottom: 20px;
   border-radius: 10px;
   background-color: #98ddca;
   border: none;
   color: white;
}

.elButton1{
   width: 100%;
   margin-left:0px  !important;
   margin-bottom: 20px;
   border-radius: 10px;
   background-color: #98ddca;
   border: none;
   color: white;
}


.elButton :hover{
   color:#98ddca;
   background-color:white;
}

.forgotPwd{
    font-size: 12px;
    float: right;
    color:	#D3D3D3;
    margin-bottom: 10px;


}



.bottom{
  margin: 100px auto;
}


.elInput{
  margin-top: 20px;
}

.gender{
  margin-top: 20px;
  width: 100%;
}


</style>
